<template>
  <v-form v-model="valid">
    <!--    <mdi-home-assistant></mdi-home-assistant>-->
    <v-container>
      <v-row>
        <v-col cols="12" md="4">
          <v-text-field
            v-model="firstname"
            :counter="10"
            :rules="nameRules"
            label="First name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field
            v-model="lastname"
            :counter="10"
            :rules="nameRules"
            label="Last name"
            required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="4">
          <v-text-field v-model="email" :rules="emailRules" label="E-mail" required></v-text-field>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>
<script lang="ts" setup>
// 如果需要使用组件关联路由图标需要建立映射
import IconHome from "~icons/mdi/home"

defineOptions({
  name: 'UseVuetifyForm',
})

const valid = ref(false)
const firstname = ref('')
const lastname = ref('')
const nameRules = ref([
  (value: string) => {
    if (value) return true

    return 'Name is required.'
  },
  (value: string) => {
    if (value?.length <= 10) return true

    return 'Name must be less than 10 characters.'
  },
])
const email = ref('')
const emailRules = ref([
  (value: string) => {
    if (value) return true

    return 'E-mail is required.'
  },
  (value: string) => {
    if (/.+@.+\..+/.test(value)) return true

    return 'E-mail must be valid.'
  },
])
</script>
